<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>中奖记录</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/vue-infinite-scroll.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/dayjs.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  html, body {
    height: 100%;
  }
  * {
    margin: 0;
    padding: 0;
    user-select: none;
  }

  ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #app {
    height: 100%;
    padding: 12.53vw 5.33vw 4.26vw;
    box-sizing: border-box;
  }

  .infinite-list-wrapper {
    overflow: auto;
    height: 100%;
    background: #8B34EE;
    border-radius: 10px;
    padding: 3.2vw;
    box-sizing: border-box;
  }

  .box {
    width: 100%;
    padding: 8px;
    background: url('/mobile/img/crystal-record-box.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.4vw;
    align-items: inherit;
    box-sizing: border-box;
  }

  .left-box {
    height: calc(100vw * 70 / 550);
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .date {
    color: #fff;
    font-size: 10px;
    height: calc(100vw * 70 / 550);
  }

  .type {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    left: calc(100vw * 160 / 550);
    top: calc(100vw * 36 / 550);
  }

  .name {
    font-size: 10px;
    color: #fff;
  }
  .gift-info {
    display: flex;
    align-items: center;
  }

  .img-box {
    width: calc(100vw * 80 / 550);
    font-size: 0;
    line-height: 1;
  }

  .gift-img {
    width: calc(100vw * 80 / 550);
    height: calc(100vw * 80 / 550);
    border-radius: 5px;
    background-size: contain;
    background-position: center;
  }

  .gift-day {
    width: 50%;
  }
  .van-list__loading, 
  .van-loading__text, 
  .van-list__finished-text {
    color: #fff!important;
    font-size: 12px!important;
  }
  .empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 4.26vw;
  }
  .gift-num {
    font-size: 10px;
    color: #fff;
  }
  </style>
</head>

<body>
  <div id="app">
    <div class="infinite-list-wrapper">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="load"
        :immediate-check="false"
      >
        <ul>
          <li v-for="(item, index) in items" :key="index" class="box">
            <div class="gift-info">
              <div class="img-box">
                <img class="gift-img" :src="item.awardUrl" alt="">
              </div>
              <div class="left-box">
                <div class="type">礼物</div>
                <div class="name">{{item.awardName}}<span class="gift-num"> x{{item.awardQty}}</span></div>
              </div>
            </div>
            <span class="date">{{dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </li>
        </ul>
      </van-list>
      <div v-if="finished && !items.length" class="empty">暂无数据，快去砸蛋吧</div>
    </div>
  </div>
  <script>
  var count = 0;

  new Vue({
    el: '#app',
    data: {
      finished: false,
      items: [],
      loading: false,
      noMore: false,
      limit: 10,
      page: 1,
      type: null,
    },
    created() {
      this.getData()
    },
    computed: {
      disabled() {
        return this.loading || this.noMore
      },
    },
    methods: {
      getData() {
        request.post('/api/business/app/extractRecordMergeH5/getMyExtractAwardMerge', {
          limit: this.limit,
          page: this.page,
        }).then(res => {
          console.log(res)
          if (res.data && res.data.list) {
            if (res.data.list.length) {
              this.items = this.items.concat(res.data.list)
            } else {
              this.finished = true
              this.noMore = true
            }
            this.loading = false
          }
        })
      },
      load() {
        this.loading = true
        this.page++
        this.getData()
      },
    }
  });
  </script>
</body>

</html>